<template>
  <view class="detail-container">
    <view>
      <!-- <view class="status">
				<text>TS20201023001</text>
				<text style="color: #43CC46;">已完成</text>
				<text style="color: #7D77EF;" v-if="ticketDetail['工单状态'] === 'unclaimed'">待派发</text>
				<text style="color: #FFB93F;" v-if="ticketDetail['工单状态'] === 'pending'">待处理</text>
				<text style="color: #3080FB;" v-else-if="ticketDetail['工单状态'] === 'handling'">处理中</text>
				<text style="color: #43CC46;" v-else-if="ticketDetail['工单状态'] === 'completed'">已完成</text>
				<text style="color: #FB5656;" v-else-if="ticketDetail['工单状态'] === 'abandoned'">已废弃</text>
			</view> -->
      <view class="order-content">
        <view class="content-item">
          <text class="item-name">检查点类型：</text>
          <text>{{ checkPointType[record["检查点类型"]] }}</text>
          <!-- <text>{{ticketDetail['工单编号']}}</text> -->
        </view>
        <view class="content-item">
          <text class="item-name">检查点名称：</text>
          <view style="word-break: break-all; flex: 1">{{
            record["检查点名称"]
          }}</view>
          <!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
        </view>
        <view class="content-item">
          <text class="item-name">检查点地址：</text>
		  <view style="word-break: break-all; flex: 1">{{
		    record["地址"]
		  }}</view>
        </view>
        <view class="content-item">
          <text class="item-name">所属网格：</text>
          <view style="word-break: break-all; flex: 1">{{
            record["所属网格"]
          }}</view>
        </view>
        <view class="content-item">
          <text class="item-name">网格长：</text>
          <view style="word-break: break-all; flex: 1">{{
            record["网格长"]
          }}</view>
        </view>
        <view class="content-item">
          <text class="item-name">处理人：</text>
          <view style="word-break: break-all; flex: 1">{{
            record["处理人"]
          }}</view>
        </view>
        <view class="content-item">
          <text class="item-name">处理人电话：</text>
          <view style="word-break: break-all; flex: 1">{{
            record["处理人电话"]
          }}</view>
        </view>
        <view v-if="record['巡检日期']" class="content-item">
          <text class="item-name">巡检生成日期</text>
          <text> {{record['巡检日期']}}</text>
        </view>
		<view v-if="record['完成时间']" class="content-item">
		  <text class="item-name">完成时间</text>
		  <text> {{record['完成时间']}}</text>
		</view>
        <view class="content-item">
          <text class="item-name">巡检类型</text>
          <view style="word-break: break-all; flex: 1">{{
            types["巡检类型"][record["巡检类型"]]
          }}</view>
        </view>
        <view class="content-item">
          <text class="item-name">巡检优先级</text>
          <view style="word-break: break-all; flex: 1">{{
            types["巡检优先级"][record["巡检优先级"]]
          }}</view>
        </view>
        <view class="content-item">
          <text class="item-name">巡检结果</text>
		  <text :style="{color: levelTypeColor[record['巡检结果'] - 1]}">{{ types['巡检结果'][record['巡检结果']] }}</text>
        <!-- <view  style="word-break: break-all; flex: 1">
            {{ types['巡检结果'][record['巡检结果']] }}</view
          > -->
        </view>
      </view>
	  <view v-if="record['检查项'].length !== 0" class="check-content" style="margin-bottom: 20rpx;">
	  	<view class="install-type title">消防检查事项{{'(' + record['检查项'].length + ')'}}</view>
	  	<view class="check-item" v-for="(item, index) in record['检查项']" :key="item.id">
	  		<view>
	  			{{index+1}}、{{item['检查项描述']}}
	  		</view>
	  		<view class="check-result">结果：
			<text v-show="item['结果'] == 1">合格</text>
			<text v-show="item['结果'] == 2">不合格</text>
	  			<!-- uni-data-checkbox v-model="params['巡检项'][index]['结果']" :localdata="status"></uni-data-checkbox> -->
	  			<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
	  			<!-- <text class="switch">显示</text> -->
	  		</view>
			<uncheck-record :inspect="item" v-if="item['结果'] == 2 && (item['描述'] || item['附件'].length !== 0)"></uncheck-record>
	  	</view>
	  </view>
	  <!-- 设施检查项 -->
	  <view v-if="record['设施检查项'].length" class="check-content">
	  	<view class="install-type title">设施检查事项</view>
	  	<view v-if="annihilatorItem.length !== 0">
	  		<view class="install-type" style="margin-bottom: 40rpx;">灭火器（{{annihilatorLength}}个）</view>
	  		<view class="check-item" v-for="(item,index) in annihilatorItem" :key="item.id">
	  			<view>
	  				{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
	  			</view>
	  			<view class="check-result">结果：
				<text v-show="item['结果'] == 1">合格</text>
				<text v-show="item['结果'] == 2">不合格</text>
	  				<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
	  				<!-- <text class="switch">显示</text> -->
	  				<!-- <view v-if="params['设施巡检项'][index]['评价'] == 2">不合格</view> -->
	  			</view>
				<uninstall-record :install="item" v-if="item['结果'] == 2"></uninstall-record>
	  		</view>
	  	</view>
	  	<view v-if="gasTankItem.length !== 0">
	  		<view class="install-type" style="margin-bottom: 40rpx;">煤气罐（{{gasTankLength}}个）</view>
	  		<view class="check-item" v-for="(item,index) in gasTankItem" :key="item.id">
	  			<view>
	  				{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
	  			</view>
	  			<view class="check-result">结果：
				<text v-show="item['结果'] == 1">合格</text>
				<text v-show="item['结果'] == 2">不合格</text>
	  				<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
	  				<!-- <text class="switch">显示</text> -->
	  			</view>
				<uninstall-record :install="item" v-if="item['结果'] == 2"></uninstall-record>
	  		</view>
	  	</view>
	  	<view v-if="hydrantItem.length !== 0">
	  		<view class="install-type" style="margin-bottom: 40rpx;">消防栓（{{hydrantLength}}个）</view>
	  		<view class="check-item" v-for="(item,index) in hydrantItem" :key="item.id">
	  			<view>
	  				{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
	  			</view>
	  			<view class="check-result">结果：
				<text v-show="item['结果'] == 1">合格</text>
				<text v-show="item['结果'] == 2">不合格</text>
	  				<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
	  				<!-- <text class="switch">显示</text> -->
	  			</view>
				<uninstall-record :install="item" v-if="item['结果'] == 2"></uninstall-record>
	  		</view>
	  	</view>
	  	<view v-if="smokeItem.length !== 0">
	  		<view class="install-type" style="margin-bottom: 40rpx;">烟雾探测器（{{smokeLength}}个）</view>
	  		<view class="check-item" v-for="(item,index) in smokeItem" :key="item.id">
	  			<view>
	  				{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
	  			</view>
	  			<view class="check-result">结果：
				<text v-show="item['结果'] == 1">合格</text>
				<text v-show="item['结果'] == 2">不合格</text>
	  				<!-- <uni-data-checkbox v-model="smokeList[index]['评价']" :localdata="status"></uni-data-checkbox> -->
	  				<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
	  				<!-- <text class="switch">显示</text> -->
	  			</view>
				<uninstall-record :install="item" v-if="item['结果'] == 2"></uninstall-record>
	  		</view>
	  	</view>
	  	<view v-if="temperateItem.length !== 0">
	  		<view class="install-type" style="margin-bottom: 40rpx;">温度探测器（{{temperateLength}}个）</view>
	  		<view class="check-item" v-for="(item,index) in temperateItem" :key="item.id">
	  			<view>
	  				{{'(' + (index+1) + ')'}} {{item['检查项描述']}}
	  			</view>
	  			<view class="check-result">结果：
				<text v-show="item['结果'] == 1">合格</text>
				<text v-show="item['结果'] == 2">不合格</text>
	  				<!-- <uni-data-checkbox v-model="temperateList[index]['评价']" :localdata="status"></uni-data-checkbox> -->
	  				<!-- <text v-if="params['巡检项'][index]['评价'] == 2" class="switch">隐藏</text> -->
	  				<!-- <text class="switch">显示</text> -->
	  			</view>
				<uninstall-record :install="item" v-if="item['结果'] == 2"></uninstall-record>
	  		</view>
	  	</view>
	  	<!-- <unquality-facility></unquality-facility> -->
	  </view>
    </view>
  </view>
</template>

<script>
import unqualityCheck from "@/fireGridCheck/components/unqualityCheck.vue";
import uncheckRecord from '@/fireGridCheck/components/uncheckRecord.vue'
import uninstallRecord from '@/fireGridCheck/components/uninstallRecord.vue'
import unqualityFacility from "@/fireGridCheck/components/unqualityFacility.vue";
import dayjs from 'dayjs'
export default {
  components: {
    unqualityCheck,
    unqualityFacility,
	uncheckRecord,
	uninstallRecord
  },
  data() {
    return {
      record: {},
	  levelTypeColor: ['#4FAF42','#f8c720','#fa8b1e','#fb2d2d'],
      params: {
        id: null,
      },
	  params1: {
		  检查点id: null
	  },
      rectifyInfo: {},
      checkPointType: this.$type.checkPointType,
      title: "",
      types: this.$type,
	  hydrantItem: [],
	  annihilatorItem: [],
	  smokeItem: [],
	  temperateItem: [],
	  gasTankItem: [],
	  hydrantLength: 0,
	  annihilatorLength: 0,
	  smokeLength: 0,
	  temperateLength: 0,
	  gasTankLength: 0
    }
  },
  onLoad(options) {
    this.params.id = +JSON.parse(options.item).id
	this.record = JSON.parse(options.item)
	this.params1.检查点id = +JSON.parse(options.item).检查点id
	console.log(this.record)
    // this.params.id = 431;
    this.getRecordDetail()
	this.getInstallList()
  },
  onShow() {},
  computed: {},
  methods: {
    getRecordDetail() {
	  uni.showLoading({
	  	mask: true
	  })
      this.$http.post("gridSystem/inspection/info", this.params).then((res) => {
        if (res.code === 10000) {
          console.log(res.data, '数据')
		  res.data.完成时间 = res.data.完成时间 && dayjs(res.data.完成时间).format('YYYY-MM-DD HH:mm:ss')
          this.record = res.data
		  this.record['检查项'] = this.record['检查项'] || []
		  this.record['设施检查项'] = this.record['设施检查项'] || []
		  this.hydrantItem = this.record.设施检查项.filter(item => item.设备类型 == 'hydrant')
		  this.annihilatorItem = this.record.设施检查项.filter(item => item.设备类型 == 'annihilator')
		  this.smokeItem = this.record.设施检查项.filter(item => item.设备类型 == 'smokeDetector')
		  this.temperateItem = this.record.设施检查项.filter(item => item.设备类型 == 'temperatureDetector')
		  this.gasTankItem = this.record.设施检查项.filter(item => item.设备类型 == 'gasTank')
        }
      })
    },
	getInstallList() {
		this.$http.post('gridSystem/device/listWithoutAuth', this.params1).then(res => {
			console.log(res)
			if(res.code === 10000){
				// this.installList = res.data.list
				if(res.data.list !== null) {
					this.hydrantLength = res.data.list.filter(item => item.设施类型 === 'hydrant').length
					this.annihilatorLength = res.data.list.filter(item => item.设施类型 === 'annihilator').length
					this.smokeLength = res.data.list.filter(item => item.设施类型 === 'smokeDetector').length
					this.temperatelength = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
					this.gasTankLength = res.data.list.filter(item => item.设施类型 === 'gasTank').length
				}
			}
		})
	}
  },
};
</script>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f5f5;
  min-height: 100%;
  height: auto;
  font-size: 28rpx;
}
.van-empty__description {
  margin-top: -4rpx !important;
}

.detail-container {
  background-color: #f5f5f5;

  .accept-ticket {
    height: 90rpx;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3080fb;
  }
  .order-content {
    width: 750rpx;
    background-color: #fff;
    margin-bottom: 135rpx;
    padding-left: 20rpx;
    padding-top: 30rpx;
    margin-bottom: 20rpx;
    .content-item {
      // height: 72rpx;
      padding: 20rpx 20rpx 20rpx 0;
      display: flex;
      align-items: center;
	  font-size: 32rpx;
      .item-name {
        width: 200rpx;
        margin-right: 20rpx;
      }
    }

    .content-img {
      width: 100%;
      height: 280rpx;
      display: flex;
      margin-top: 40rpx;

      .img-item {
        width: 220rpx;
        height: 220rpx;
        margin-right: 10rpx;

        image {
          width: 100%;
          height: 100%;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .detail-item {
      width: 750rpx;
      height: 88rpx;
      display: flex;
      line-height: 88rpx;
      // padding-left: 20rpx;
      background-color: #fff;
      border-bottom: 2rpx solid #f5f5f5;

      .left {
        margin-right: 37rpx;
      }

      .sign {
        width: 115rpx;
        height: 88rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        margin-right: 26rpx;
      }
    }
  }
  .check-content {
    height: auto;
    background-color: #fff;
    padding: 20rpx;
	.install-type {
		font-size: 36rpx;
	}
    .title {
      height: 80rpx;
      font-size: 32rpx;
      text-align: center;
      line-height: 60rpx;
      border-bottom: 2rpx solid #dedede;
      margin-bottom: 30rpx;
    }
    .check-item {
      margin-bottom: 40rpx;
	  .check-result {
		  margin-bottom: 20rpx;
	  }
    }
  }
  .van-empty {
    height: 300rpx;
    margin-bottom: 20rpx;
  }
}
</style>
